<meta charset="utf-8" />
<script src="../lib/jquery.js"></script>
<script src="../lib/jquery-ui.js"></script>
<script src="06_puzzle.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery-ui.css">
<style>
* {
	padding: 0;
	margin: 0;
}

body {
	background: #414141;
}

#draggable_wrapper {
	width: 400px;
	height: 400px;
}

#draggable_wrapper>.draggable {
	width: 92px;
	height: 92px;
	z-index: 110;
	position: absolute;
}

#gallery_wrapper {
	position: absolute;
	left: 500px;
	top: 100px;
	width: 310px;
	height: 500px;
}

#gallery_wrapper>div {
	width: 92px;
	height: 92px;
	margin: 1px; solid #000;
	float: left;
	opacity: 0.5;
}
</style>
<div id="draggable_wrapper">
	<div class="draggable ui-widget-content">
		<p>
			<img src="img/puzzle0.jpg" alt="puzzle0" />
		</p>
	</div>
	<div class="draggable ui-widget-content">
		<p>
			<img src="img/puzzle1.jpg" alt="puzzle1" />
		</p>
	</div>
	<div class="draggable ui-widget-content">
		<p>
			<img src="img/puzzle2.jpg" alt="puzzle2" />
		</p>
	</div>
	<div class="draggable ui-widget-content">
		<p>
			<img src="img/puzzle3.jpg" alt="puzzle3" />
		</p>
	</div>
	<div class="draggable ui-widget-content">
		<p>
			<img src="img/puzzle4.jpg" alt="puzzle4" />
		</p>
	</div>
	<div class="draggable ui-widget-content">
		<p>
			<img src="img/puzzle5.jpg" alt="puzzle5" />
		</p>
	</div>
	<div class="draggable ui-widget-content">
		<p>
			<img src="img/puzzle6.jpg" alt="puzzle6" />
		</p>
	</div>
	<div class="draggable ui-widget-content">
		<p>
			<img src="img/puzzle7.jpg" alt="puzzle7" />
		</p>
	</div>
	<div class="draggable ui-widget-content">
		<p>
			<img src="img/puzzle8.jpg" alt="puzzle8" />
		</p>
	</div>
</div>

<div id="gallery_wrapper">
	<div>
		<p>
			<img src="img/puzzle0.jpg" alt="puzzle0" />
		</p>
	</div>
	<div>
		<p>
			<img src="img/puzzle1.jpg" alt="puzzle1" />
		</p>
	</div>
	<div>
		<p>
			<img src="img/puzzle2.jpg" alt="puzzle2" />
		</p>
	</div>
	<div>
		<p>
			<img src="img/puzzle3.jpg" alt="puzzle3" />
		</p>
	</div>
	<div>
		<p>
			<img src="img/puzzle4.jpg" alt="puzzle4" />
		</p>
	</div>
	<div>
		<p>
			<img src="img/puzzle5.jpg" alt="puzzle5" />
		</p>
	</div>
	<div>
		<p>
			<img src="img/puzzle6.jpg" alt="puzzle6" />
		</p>
	</div>
	<div>
		<p>
			<img src="img/puzzle7.jpg" alt="puzzle7" />
		</p>
	</div>
	<div>
		<p>
			<img src="img/puzzle8.jpg" alt="puzzle8" />
		</p>
	</div>
</div>